<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scroll</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      width: 100vw;
      overflow-x: hidden;
    }

    .scroll_box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300vh;
      width: 100vw;
      background: yellow;
    }

    #main {
      border: 10px solid red;
      width: 50vw;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="scroll_box">
    <div id="main"></div>
  </div>
  <script src="matter.js"></script>
  <script>
    const { Engine, Render, Bodies, Composite, Events, Body, Mouse, MouseConstraint } = Matter;
    const main = document.querySelector('#main');
    const eleWidth = main.offsetWidth;
    const eleHeight = main.offsetHeight;

    const engine = Engine.create({
      gravity: {
        x: 0,
        y: 0.5,
      }
    });
    const render = Render.create({
      element: main,
      engine: engine,
      options: {
        width: eleWidth,
        height: eleHeight,
        wireframes: false,
        background: TransformStream, //透明背景
      }
    });
    const world = engine.world;
    // 创建地面
    const size = 500;
    let edgeOptions = {
      isStatic: true,
      render: {
        visible: false
      }
    };
    const edgeList = [
      Bodies.rectangle(eleWidth / 2, -1 * size, eleWidth, size * 2, edgeOptions),
      Bodies.rectangle(eleWidth / 2, eleHeight + size, eleWidth, size * 2, edgeOptions),
      Bodies.rectangle(-1 * size, eleWidth / 2, size * 2, eleHeight, edgeOptions),
      Bodies.rectangle(eleWidth + size, eleHeight / 2, size * 2, eleHeight, edgeOptions),
    ];
    Composite.add(world, edgeList);
    const ballList = []; //创建小球
    for (let i = 0; i < 10; i++) {
      let size = Math.random() * 10 + 50;
      let ballX = Math.random() * (eleWidth - size) + size;
      let ballY = Math.random() * (eleHeight - size) + size;
      let color = `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`
      const ball = Bodies.circle(ballX, ballY, size, {
        friction: 0,
        frictionAir: 0.01,
        restitution: 0.9,
        render: {
          fillStyle: color,
          strokeStyle: "#fff",
          lineWidth: 5
        }
      });
      ballList.push(ball);
      Composite.add(world, ball);
    }
    // 鼠标
    const mouse = Mouse.create(main);
    const mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        render: {
          visible: false
        }
      }
    });
    Composite.add(world, mouseConstraint);
    Engine.run(engine);
    Render.run(render);

    let scrollSpeed = 0;
    let lastScrollTop =window.pageYOffset || document.documentElement.scrollTop;
    window.addEventListener('scroll', function (e) {
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      scrollSpeed = currentScrollTop - lastScrollTop;
      lastScrollTop = currentScrollTop;
      if (ballList.length > 0) {
        console.log(scrollSpeed);
        ballList.forEach(ball => {
          // 添加力
          Body.applyForce(ball, { x: ball.position.x, y: ball.position.y }, { x: 0, y: scrollSpeed *-0.0005 });
          // 设置速度
          // Body.setVelocity(ball, { x: 0, y: 0 });
        });
      }
    });



  </script>
</body>

</html>